import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
const triangleArrowRight = require('@/imgC/home/triangle.png')

export default class PositionManage extends React.PureComponent {
  static propTypes = {
    jobData: PropTypes.object,
    jobClick: PropTypes.func
  }

  static defaultProps = {
    jobData: {}
  }

  render () {
    const {
      jobData: {
        fullAll,
        fullOnline,
        internshipAll,
        internshipOnline,
        partAll,
        partOnline
      },
      jobClick
    } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.myJobContentView}>
          <View style={styles.contentItem}>
            <CustomImage
              style={styles.myJobContentItemImg}
              source={require('@/imgC/userinfo/jzzw.png')}
            />
            <CustomButton
              style={styles.myJobContentItemVIew}
              params={0}
              onPress={jobClick}
            >
              <Text style={styles.myJobContentItemLabel}>兼职岗位</Text>
              <View style={styles.myJobContentItemLabelBottom}>
                {partAll
                  ? <View style={styles.myJobContentItemRightLabel}>
                    <Text style={styles.label}>{`招聘中：${partOnline}`}</Text>
                    <Text style={styles.label}>{`已关闭：${partAll - partOnline}`}</Text>
                  </View>
                  : <Text style={styles.label}>暂未发布职位～</Text>}
              </View>
            </CustomButton>
          </View>
          <View style={styles.contentItem}>
            <CustomImage
              style={styles.myJobContentItemImg}
              source={require('@/imgC/userinfo/sxzw.png')}
            />
            <CustomButton
              style={styles.myJobContentItemVIew}
              params={2}
              onPress={jobClick}
            >
              <Text style={styles.myJobContentItemLabel}>实习岗位</Text>
              <View style={styles.myJobContentItemLabelBottom}>
                {internshipAll
                  ? <View style={styles.myJobContentItemRightLabel}>
                    <Text style={styles.label}>{`招聘中：${internshipOnline}`}</Text>
                    <Text style={styles.label}>{`已关闭：${internshipAll - internshipOnline}`}</Text>
                  </View>
                  : <Text style={styles.label}>暂未发布职位～</Text>}
              </View>
            </CustomButton>
          </View>
          <View style={styles.contentItem}>
            <CustomImage
              style={styles.myJobContentItemImg}
              source={require('@/imgC/userinfo/qzzw.png')}
            />
            <CustomButton
              style={styles.myJobContentItemVIew}
              params={1}
              onPress={jobClick}
            >
              <Text style={styles.myJobContentItemLabel}>全职岗位</Text>
              <View style={styles.myJobContentItemLabelBottom}>
                {fullAll
                  ? <View style={styles.myJobContentItemRightLabel}>
                    <Text style={styles.label}>{`招聘中：${fullOnline}`}</Text>
                    <Text style={styles.label}>{`已关闭：${fullAll - fullOnline}`}</Text>
                  </View>
                  : <Text style={styles.label}>暂未发布职位～</Text>}
              </View>
            </CustomButton>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: ScaleS(25),
    marginHorizontal: ScaleS(20)
  },
  manageTitle: {
    color: '#000000',
    fontSize: ScaleT(25),
    lineHeight: ScaleS(36),
    fontWeight: '500'
  },
  myJobContentView: {
    marginTop: ScaleS(2)
  },
  contentItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: ScaleS(20)
  },
  myJobContentItemImg: {
    width: ScaleS(21),
    height: ScaleS(21),
    marginRight: ScaleS(22),
    marginLeft: ScaleS(3),
    marginTop: ScaleS(13)
  },
  myJobContentItemVIew: {
    flex: 1,
    flexDirection: 'column',
    // height: ScaleS(80),
    borderRadius: ScaleS(8),
    backgroundColor: '#F9F9F9',
    paddingVertical: ScaleS(15),
    paddingHorizontal: ScaleS(15)
  },
  myJobContentItemLabel: {
    color: '#3C3C3C',
    fontSize: ScaleT(15),
    fontWeight: '500'
  },
  myJobContentItemRightLabel: {
    flex: 1,
    flexDirection: 'row'
  },
  label: {
    color: '#BEBEBE',
    fontSize: ScaleT(12),
    fontWeight: '400',
    marginTop: ScaleS(23),
    marginRight: ScaleS(20)
  },
  myJobContentItemRightImg: {
    width: ScaleS(7),
    height: ScaleS(5),
    transform: [{ rotate: '-90deg' }]
  }
})
